<template>
  <div class="approval-list-container">
    <div v-if="AcceptanceRecordList.length === 0" class="no-data">
      暂无验收记录
    </div>
    <div v-for="item in AcceptanceRecordList" class="signature-container">
      <div class="item-header">
        <span>{{ item.formName }}</span>
      </div>
      <!-- 签字情况列表 -->
      <div class="signature-list">
        <div class="title_name">
          签字情况:
        </div>
        <div
            v-for="(item, index) in item.signatureItems"
            :key="index"
            class="signature-item"
        >
          <div class="label">{{ item.name }}</div>
          <div class="status">
            <!-- 根据状态显示不同图标，这里用简单的文字模拟，也可替换成图标组件 -->
            <span
                :class="{
              'check': item.status === 'check',
              'cross': item.status === 'cross',
              'info': item.status === 'info'
            }"
            >
            {{ getStatusSymbol(item.status) }}
          </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getListFormByFormId,getListForm} from "@/js/Form.js";
import {getStateByUserIdAndFormId} from "@/js/UserForm.js";
export default {
  name: 'SignatureStatus',
  mounted() {
    this.fetchAcceptanceList();
  }
  ,
  data() {
    return {
      AcceptanceRecordList: [],
      formId: '',
      array_formId: [],
      signatureItems: [
        {name: '王部长',user_id:2, status: 'check' },
        {name: '张处',user_id:3, status: 'check' },
        {name: '赵处',user_id:4, status: 'cross' },
        {name: '李处',user_id:5, status: 'info' }
      ]
    };
  },
  methods: {
    getStatusSymbol(status) {
      switch (status) {
        case 'check':
          return '✔';
        case 'cross':
          return '×';
        case 'info':
          return '!';
        default:
          return '';
      }
    },
    async fetchAcceptanceList() {
      // 使用 Promise.all 并行请求所有 formId 的数据
      this.array_formId = await getListForm().then(response => {
        if (response.data) {
          return response.data.map(item => item.formId);
        }
        return [];
      }).catch(error => {
        console.error('获取表单ID列表出错:', error);
        return [];
      });
      const requests = this.array_formId.map(formId =>
          getListFormByFormId(formId)
      );//控制台报错信息.
      Promise.all(requests)
          .then(async responses => {
            // 合并所有响应中的数据
            const combinedData = responses.flatMap(response => {
              if (response.data) {
                return response.data;
              } else {
                console.error('获取验收记录失败:', response.data?.msg);
                return [];
              }
            });
            // 对每个 form 数据补充签字状态
            for (const item of combinedData) {
              const signStatus = await Promise.all(
                  this.signatureItems.map(async signItem => {
                    try {
                      const stateData = await getStateByUserIdAndFormId(signItem.user_id,item.formId);
                      console.log('stateData:', stateData);
                      let status = 'info'; // 默认状态
                      if (stateData && stateData.data !== undefined) {
                        switch (stateData.data) {
                          case 1:
                            status = 'check';
                            break;
                          case 2:
                            status = 'cross';
                            break;
                          default:
                            status = 'info';
                        }
                      }
                      return { ...signItem, status };
                    } catch (error) {
                      console.error(`获取 ${signItem.name} 状态出错:`, error);
                      return { ...signItem, status: 'info' };
                    }
                  })
              );
              item.signatureItems = signStatus;
            }
            // 更新组件数据
            this.AcceptanceRecordList = combinedData;
          })
          .catch(error => {
            console.error('获取验收记录列表出错:', error);
          });
    }
  }
};
</script>

<style scoped>
.signature-container {
  width: 97%;
  border: 2px solid #181818;
  border-radius: 18px;
  padding: 18px;
  background-color: white;
}
.signature-list {
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 10px;
}
.signature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 15px;
}
.label {
  font-size: 14px;
}
.status {
  font-size: 20px;
}
.check {
  color: green;
}
.cross {
  color: red;
}
.info {
  color: orange;
}
.approval-list-container{
  width: 100%;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}
.no-data {
  text-align: center;
  padding: 20px;
  color: #999;
}
.item-header{
  margin-bottom: 40px;
  font-style: italic;
}
.title_name{
  font-size: 15px;
  font-weight: bold;
  margin-right: 10px;
  width: 70px;
}
</style>